<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% String path = request.getContextPath();%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="<%=path%>/static/layui/css/layui.css">
    <script src="<%=path%>/static/layui/layui.js"></script>
    <script src="<%=path%>/static/js/jquery-3.5.1.min.js"></script>
    <style>
        .console{
            margin-top: 15px;
            margin-left: 18px;
        }
        .rbtn,.ticket{
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            margin-left: 15px;
        }
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 50%;
            transform: translateY(-50%);
        }
        .layui-table th,.layui-table td{
            /*表头内容居中显示*/
            text-align: center;
        }
    </style>
</head>
<body>

<div class="console">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <input type="text" name="name"  placeholder="输入姓名" autocomplete="off" class="layui-input inputName">
            </div>
            <button class="layui-btn search"  lay-filter="formDemo">检索</button>
            <button class="rbtn">刷新</button>
            <div class="layui-input-inline">
                <select name="provid" class="pid" id="provid" lay-filter="provid">
                    <option value=""></option>
                    <option value="2">审核中</option>
                    <option value="0">已驳回</option>
                    <option value="1">已通过</option>
                </select>
            </div>
        </div>
    </form>
</div>

<table class="layui-hide" id="test" lay-data="{id:'tables'}" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">删除选中</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    $(function () {
        //刷新iframe 绑定
        $(".rbtn").on("click", function () {
            location.reload();
        });
        $(function () {
            $(".ticket").on("click", function () {
                window.open("https://www.qunar.com/");

            });
        })
    })
</script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var layer = window.top.layer;
    var index = layer.getFrameIndex(window.name);//先得到当前iframe层的索引

    //加载模块,暴露到外部
    layui.use(['table','form'], function() {
        var table = layui.table;
        var form = layui.form;
        var state;
        var name;
        //刷新
        function fresh(){
            name = $(".layui-input").val();
            //渲染
            table.render({
                elem: '#test'
                , url: '<%=path%>/examine/examineLists'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                ,where:{name:name,state: state}
                , title: '用户数据表'
                , cols: [[
                    {checkbox: true, fixed: true, algin: 'center'}
                    , {field: 'id', title: 'ID', width: 80, algin: 'center'}
                    , {
                        field: 'userId', title: '申请人', width: 100, algin: 'center', templet: function (travle) {
                            return travle.systemUser.name
                        }
                    }
                    , {field: 'travelPersonCount', title: '出差人数', width: 100, algin: 'center'}
                    , {field: 'purpose', title: '出差目的', algin: 'center'}
                    , {field: 'planDate', title: '计划出差日期', algin: 'center'}
                    , {field: 'days', title: '预计出差天数', sort: true, width: 150, algin: 'center'}
                    , {
                        field: 'auditUser', title: '审核人', algin: 'center', width: 100
                    }
                    , {
                        field: 'auditState', title: '审核状态', algin: 'center', width: 100, templet: function (travel) {
                            if (travel.auditState == 0) {
                                return "<span style='color: #b52c26;font-weight: bold'>已驳回</span>"
                            }
                            ;
                            if (travel.auditState == 1) {
                                return "<span style='color: #00B83F;font-weight: bold'>已通过</span>"
                            }
                            if (travel.auditState == 2) {
                                return "<span style='color: #f2bb46;font-weight: bold'>审核中</span>"
                            }
                        }
                    }
                    , {toolbar: '#barDemo', title: '操作', width: 135, algin: 'center'}
                ]]
                , page: {
                    curr:1,
                    count:10
                },
                limit: 10,
                loading:true,
                parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.data.total, //解析数据长度
                        "data": res.data.list //解析数据列表
                    };
                },
                limits: [10,20,30,40,50]
            });
            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                var str = "";
                var $ = layui.$;
                switch(obj.event){
                    case 'getCheckData':
                        var data = checkStatus.data;
                        if(data.length>0){
                            for(var i = 0;i<data.length;i++){
                                str = str+","+data[i].id;
                            }
                            str = str.substring(1,str.length);
                            layer.alert(str/*JSON.stringify(data)*/);
                            layer.confirm('确定删除吗', function(index){
                                $.ajax({
                                    url:"<%=path%>/examine/deleteSelect",
                                    data:{ids:str},
                                    method:"post",
                                    success:function (res) {
                                        $("input[type=checkbox]:checked").each(function () {
                                            var n = $(this).parents('tbody tr').index();
                                            $("table tbody").find('tr:eq('+n+')').remove();
                                        })
                                        layer.close(index)
                                        location.reload();

                                    }
                                })
                            });
                        }else{
                            layer.msg("请选择要删除的行");
                            return;
                        }

                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选');
                        break;

                    //自定义头工具栏右侧图标 - 提示
                    case 'LAYTABLE_TIPS':
                        layer.alert('这是工具栏右侧自定义的一个图标按钮');
                        break;
                };
            });
            //监听行工具事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                var $ = layui.$;
                if(obj.event === 'del'){
                    layer.confirm('确定删除吗', function(index){
                        var id = obj.data.id;
                        $.ajax({
                            url:"<%=path%>/examine/delOne",
                            data:{id:id},
                            success:function (res) {

                            }
                        })
                        obj.del();
                        location.reload();
                    });
                } else if(obj.event === 'edit'){

                    layer.open({
                        type: 2,
                        title: '出差申请审核',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['70%', '90%'],
                        shadeClose: false,
                        content: '<%=path%>/examine/travelList?id='+data.id //iframe的url
                    });
                }
            });
        }

        fresh();
        //表格下拉监听
        form.on("select",function (data) {
            state = data.value;
            $(".inputName").val("");
            if(state==""){
                return;
            }
            fresh();
        });
        //搜索监听
        $(".search").on('click',function () {
            $(".layui-unselect").val("");
            fresh();
            return false;
        })
    });
</script>
</body>
</html>